import React from "react";
import UserAvatar, { UserAvatarProps } from "../UserAvatar";
import "./style.less";

export interface UserAvatarWithNameProps extends UserAvatarProps {
  /**
   * 用户名
   */
  name: string;
  /**
   * 副标题
   */
  subtitle?: string;
  /**
   * 显示类型
   * - "default": 左侧头像，右侧单行用户名
   * - "vertical": 左侧头像，右侧上下两行，主标题和副标题
   */
  displayType?: "default" | "vertical";
  /**
   * 描述信息
   */
  description?: string;
  /**
   * 自定义样式类名
   */
  className?: string;
  /**
   * 自定义样式
   */
  style?: React.CSSProperties;
}

/**
 * 用户头像和用户名组件
 */
const UserAvatarWithName: React.FC<UserAvatarWithNameProps> = ({
  name,
  subtitle,
  description,
  displayType = "default",
  className = "",
  style,
  ...avatarProps
}) => {
  return (
    <div
      className={`user-avatar-with-name ${displayType} ${className}`}
      style={style}
    >
      <UserAvatar name={name} {...avatarProps} />
      <div className="user-info">
        <span className="user-name">
          {name}
          {description && (
            <span className="user-description"> {description}</span>
          )}
        </span>
        {displayType === "vertical" && subtitle && (
          <span className="user-subtitle">{subtitle}</span>
        )}
      </div>
      {displayType !== "vertical" && subtitle && (
        <span className="user-subtitle">{subtitle}</span>
      )}
    </div>
  );
};

export default UserAvatarWithName;
